<template>
	<tm-fullView>
		<tm-menubars title="双向滑块" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet>
			<view class="py-24 text-size-n">基本示例</view>
			<view class="pb-36 text-size-n">数组：{{JSON.stringify(value)}},区间值：{{num}}</view>
			<tm-sliders show-left show-right @change="chenge" v-model="value"></tm-sliders>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				自定义slot插槽,始终显示信息标签
			</view>
			<tm-sliders showTip color="bg-gradient-orange-accent" :max="100" v-model="value" show-right show-left>
				<template v-slot:left="{data}">
					<view>
						<view>{{data.value[0]}}</view>
						<view>价格</view>
					</view>
				</template>
				<template v-slot:tipsLeft="{data}">
					<view><tm-icons dense color="white"  name="icon-flag-fill"></tm-icons></view>
				</template>
				<template v-slot:tipsRight="{data}">
					<view><tm-icons dense color="white"  name="icon-position-fill"></tm-icons></view>
				</template>
				<template v-slot:right="{data}">
					<view>
						<view>{{data.max}}</view>
						<view>最大</view>
					</view>
				</template>
			</tm-sliders>
		</tm-sheet>
		<tm-sheet>
			
			<view class="py-24 text-size-n">刻度尺</view>
			<view class="pb-36 text-size-n">数组：{{JSON.stringify(value)}},区间值：{{num}}</view>
			<tm-sliders  color="bg-gradient-pink-accent" :step="10" @change="chenge" v-model="value"></tm-sliders>
		</tm-sheet>
		<tm-sheet>
			<view class="py-24 text-size-n">竖向</view>
			<tm-sliders :height="350" color="bg-gradient-orange-accent" vertical @change="chenge" v-model="value"></tm-sliders>
		</tm-sheet>
		
		<view style="height: 50upx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSliders from "@/tm-vuetify/components/tm-sliders/tm-sliders.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSliders,tmIcons},
		data() {
			return {
				value:[0,10],
				num:0,
			};
		},
		methods:{
			chenge(e){
				
				this.num = e;
			}
		}
	}
</script>

<style lang="less">

</style>
